<extend name="_layout/main"/>
<block name="head">
    <style>
        .middletwo {
            width: 100%;
            padding: 0 5%;
            height: auto;
            background-color: #fff;
            border-top: 1px solid #dfdfdf;
            border-bottom: 1px solid #dfdfdf;
            margin-bottom: 2%;
        }

        .middletwo p {
            width: 100%;
            line-height: .9rem;
            color: #333;
        }

        .mid {
            text-align: center;
            font-weight: bold;
        }

        .footerone {
            bottom: 0;
        }

        .warptwo {
            padding-bottom: 1.8rem;
        }

        .detail .top .shang .you {
            border: 0;
            font-size: 0.4rem;
        }

        .detail .top .shang .you p {
            text-align: right;
        }

        .detail .top .xia span {
            text-align: right;
        }
        .box-s img{
            width:100%;
        }
    </style>
</block>
<block name="top">
    <header class="mui-bar mui-bar-nav" id="header">
        <a class="btn" href="javascript:history.go(-1)">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <div class="top-sch-box top-sch-boxtwo flex-col">
            <ul>
                <ol class="mid">商品详情</ol>
            </ul>
        </div>
        <a class="btn" href="{:U('Cart/index')}">
            <i class="iconfont icon-gouwuche"></i>
            <span>{$cart_count}</span>
        </a>
    </header>
</block>
<block name="content">
    <div class="warp warptwo clearfloat">
        <div class="detail clearfloat">
            <!--banner star-->
            <div class="banner swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img class="swiper-lazy" src="{$goods.goods_thumb}" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!--banner end-->
            <div class="top clearfloat box-s">
                <div class="shang clearfloat">
                    <div class="zuo clearfloat fl over2 box-s">
                        {$goods.goods_name}
                    </div>
                    <div class="you clearfloat fr">
                        <!--<i class="iconfont icon-fenxiang"></i>-->
                        <p>库存{$goods.goods_number|default=0}</p>
                    </div>
                </div>
                <div class="xia clearfloat">
                    <p class="jifen fl box-s">
                        <gt name="goods.pay_balance" value="0">
                            <samp>{$goods.pay_balance}</samp>现金
                        </gt>
                        <if condition="$goods['pay_balance'] gt 0 && $goods['pay_coupon'] gt 0">
                            +
                        </if>
                        <gt name="goods.pay_coupon" value="0">
                            <samp>{$goods.pay_coupon}</samp>购物币
                        </gt>
                        <if condition="$goods['pay_integral'] gt 0 && $goods['pay_coupon'] gt 0">
                            +
                        </if>
                        <gt name="goods.pay_integral" value="0">
                            <samp>{$goods.pay_integral}</samp>积分
                        </gt>
                    </p>
                    <span class="fr">销量{$goods.sales|default=0}件</span>
                </div>
            </div>
            <div class="middle clearfloat box-s">
                <a href="{:U('comment',['id'=>$goods['id']])}">
                    <span class="fl">商品评价</span>
                    <i class="iconfont icon-jiantou1 fr"></i>
                </a>
            </div>
            <div class=" middletwo clearfloat box-s">
                <p class="fl">商品详情</p>
                <div>
                    {$goods.introduce|stripslashes|htmlspecialchars_decode}
                </div>
            </div>

        </div>
    </div>
    <!--footerone star-->
    <div class="footerone clearfloat">
        <div class="left clearfloat fl">
            <ul>
                <li>
                    <a href="{:U('Goods/index')}">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="right clearfloat fl">
            <span class="btn fl" id="btn-add-cart" data-url="{:U('Cart/add')}" data-id="{$goods['id']}">加入购物车</span>
            <a href="#" class="btn btnone fl" onClick="toBuy()">立即购买</a>
        </div>
    </div>
    <!--footerone end-->

    <!--这里是弹出购物车内容-->
    <div class="am-share">
        <div class="am-share-footer">
            <button class="share_btn"><img src="__STATIC__/img/chahao.png"/></button>
        </div>
        <div class="am-share-sns box-s">
            <div class="sdetail clearfloat">
                <div class="top clearfloat">
                    <div class="tu clearfloat fl">
                        <span></span>
                        <img src="__STATIC__/upload/22.jpg"/>
                    </div>
                    <div class="you clearfloat fl">
                        <p class="tit">{$goods.goods_name}</p>
                        <gt name="goods.pay_balance" value="0">
                            <samp>{$goods.pay_balance}</samp>现金
                        </gt>
                        <if condition="$goods['pay_balance'] gt 0 && $goods['pay_coupon'] gt 0">
                            +
                        </if>
                        <gt name="goods.pay_coupon" value="0">
                            <samp>{$goods.pay_coupon}</samp>购物币
                        </gt>
                        <if condition="$goods['pay_integral'] gt 0 && $goods['pay_coupon'] gt 0">
                            +
                        </if>
                        <gt name="goods.pay_integral" value="0">
                            <samp>{$goods.pay_integral}</samp>积分
                        </gt>
                    </div>
                </div>
                <div class="bottom clearfloat">
                    <p class="fl">购买数量</p>
                    <div class="you clearfloat fr">
                        <ul data-id="{$goods.id}">
                            <li><img src="__STATIC__/img/jian.jpg" id="cart-decrement"/></li>
                            <li id="show_nums">1</li>
                            <input type="hidden" name="goods_num" id="goods_num" value="1"/>
                            <li><img src="__STATIC__/img/jia.jpg" id="cart-increment"/></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript:void(0)" data-id="{$goods.id}" id="btn-create-order" class="shop-btn db">确定</a>
    </div>
    <!--<include file="_layout/footer"/>-->
</block>
<block name="scripts">
    <script type="text/javascript" src="__JS__/jquery-1.8.3.min.js"></script>
    <script src="__JS__/mui.min.js"></script>
    <script type="text/javascript" src="__JS__/shopcar.js"></script>
    <script>
        var url_goods = "{:U('Goods/get_goods_number')}";
        $(document).on('click', '#btn-add-cart', function (e) {
            e.preventDefault();
            var url = $(this).data('url');
            var id = $(this).data('id');
            if (url && !isNaN(id)) {
                mui.confirm('确认添加该商品到购物车吗？', '提示', ['确定', '取消'], function (obj) {
                    if (obj.index == 0) {
                        $.post(url, {id: id}, function (xdata) {
                            if (xdata.status == 'success' && xdata.data.url) {
                                mui.alert(xdata.message, '成功', function () {
                                    document.location.href = xdata.data.url;
                                });
                            } else {
                                mui.toast(xdata.message);
                            }
                        }, 'json');
                    }
                })
            }
        })

        $(document).on('click', '#btn-create-order', function (e) {
            e.preventDefault();
            var goodsNumber = $("#goods_num").val();
            var goods_id = $(this).data('id');
            if (parseInt(goodsNumber) > 0 && !isNaN(goods_id)) {
                $.post("{:U('GoodsOrder/create_order')}", {id: goods_id, goods_num: goodsNumber}, function (xdata) {
                    if (xdata.status == 'success' && xdata.data.url) {
                        mui.alert(xdata.message, '成功', function () {
                            document.location.href = xdata.data.url;
                        });
                    } else {
                        mui.toast(xdata.message);
                    }
                }, 'json');
            }
        })

        $(document).on('click', '#cart-increment', function (e) {
            var cur_num = $("#goods_num").val();
            var id = $(this).parent().parent().data('id');

            if (isNaN(cur_num) || isNaN(id)) {
                return;
            }

            $.get(url_goods, {id: id}, function (xdata) {
                if (xdata.status == 'success') {
                    var goodsNumber = parseInt(xdata.data.goods_number);
                    if (goodsNumber > cur_num) {
                        cur_num++;
                    } else {
                        cur_num = goodsNumber;
                    }
                    $("#goods_num").val(cur_num);
                    $("#show_nums").html(cur_num);
                }
            }, 'json')
        })

        $(document).on('click', '#cart-decrement', function (e) {
            var cur_num = $("#goods_num").val();
            if (isNaN(cur_num)) {
                return;
            }
            if (cur_num > 1) {
                cur_num--;
            }
            $("#goods_num").val(cur_num);
            $("#show_nums").html(cur_num);
        })

    </script>
</block>